<template>
  <div class="lyric-wrapper" :class="currentClass">
    <div class="lyric-top">
      <div class="img-wrapper" :class="isPlaying ? 'playing' : 'paused'" @click="changePlayState">
        <img
          src="http://p4.music.126.net/W2o9BIfqO8zEw62sGcotvw==/109951165325285624.jpg?param=400y400"
          alt
          class="music-image"
        />
        <div class="hand-wrapper">
          <img
            src=""
            alt
            class="hand-icon"
          />
          <img src="https://ssh-music.vercel.app/img/play-bar.e5a7a142.png" class="bar-icon" alt />
        </div>
      </div>
      <div class="text-wrapper"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isPlaying: false,
    };
  },
  computed: {
    currentClass() {
      // return this.isShow ? "show" : "hide";
      return "show";
    },
  },
  methods: {
    changePlayState() {
      this.isPlaying = !this.isPlaying;
    },
  },
};
</script>

<style lang='less' scoped>
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.lyric-wrapper {
  position: fixed;
  z-index: 1;
  top: 50px;
  left: 0;
  bottom: 60px;
  width: 100%;
  background-color: #eee;

  transition: transform 0.5s;

  &.show {
    transform: translateY(0);
  }
  &.hide {
    transform: translateY(120%);
  }

  .lyric-top {
    padding: 0 80px;
    display: flex;

    .img-wrapper {
      position: relative;
      width: 300px;
      padding-top: 80px;

      &.playing {
        .bar-icon {
          transform: rotate(0deg);
        }

        .music-image {
          animation-play-state: running;
        }
      }

      .hand-wrapper {
        position: absolute;
        top: -10px;
        left: 50%;
        width: 30px;
        height: 30px;
        transform: translateX(-50%);
      }
      .hand-icon {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
      }

      .bar-icon {
        position: absolute;
        z-index: 1;
        top: 15px;
        left: 10px;
        width: 100px;

        transform: rotate(-30deg);
        transform-origin: 0 0;
        transition: transform 0.3s;
      }

      .music-image {
        display: block;
        width: 300px;
        height: 300px;
        border-radius: 50%;

        animation: rotate linear infinite 15s;
        animation-play-state: paused;
      }
    }

    .text-wrapper {
      width: 500px;
    }
  }
}
</style>